


function pay(){
    
    /**
     * 头部导航
    */
    var postTop = {
        methods: {
            returnPage: function(){
                var payModule = document.querySelector('.pay-module');
                
                switchGoodsDetailsFn(false, {
                    node: payModule,
                    className: 'pay-module-js'
                });
            }
        },
        template: `
                <div class="post-top">
                    <div class="return" @click="returnPage"></div>
                    <div class="pay-text-center">确认购买</div>
                </div>
                `
    };


    /**
     * 账户性息以及商品 
    */
    var payList = {
        props: {setPay: Array},
        data: function(){
            return {
                payGoods: []
            }
        },
        computed: {
            prices: function(){
                var price = 0;
                this.payGoods.forEach(function(item){
                    price += parseInt(item.price);
                });
                return price;
            }
        },
        watch: {
            setPay: function(newVal){
                this.payGoods = [];
                //console.log(newVal)
                this.payGoods = newVal;
                //console.log(newVal)
            }
        },
        template: `
                <div class="pay-list">
                    <div class="account">
                        <div class="list-left">当前账号</div>
                        <div class="list-right"><span>垃圾袋</span><span>黑色玫瑰</span><span class="iconfont icon-you"></span></div>
                    </div>
                    <div class="discount">
                        <div class="list-left">优惠券</div>
                        <div class="list-right">暂无可用礼券<span class="iconfont icon-you"></span></div>
                    </div>
                    <div class="mode">
                        <div class="list-left">支付方式</div>
                        <div class="list-right">人民币支付{{ prices }}<span class="iconfont icon-you"></span></div>
                    </div>
                    <div class="pay-list-goods">
                        <ul>
                            <li v-for="(item, index) in payGoods">
                                <a href="javascript:;">
                                    <div class="pay-list-img">
                                        <img :src="item.img">
                                    </div>
                                    <div class="pay-list-text">
                                        <h3>{{ item.gname }}</h3>
                                        <p><span>4500</span><span>7800</span><span>{{ item.price }}</span></p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                `
    };


    /**
     * 支付
    */
    var payFooter = {
        props: {setPay: Array},
        data: function(){
            return {
                payGoods: []
            }
        },
        computed: {
            prices: function(){
                var price = 0;
                this.payGoods.forEach(function(item){
                    price += parseInt(item.price);
                });
                return price;
            }
        },
        watch: {
            setPay: function(newVal){
                this.payGoods = [];
                //console.log(newVal)
                this.payGoods = newVal;
                //console.log(newVal)
            }
        },
        methods: {
            payBtn: function(){
                var This = this;
                elasticFrame('确认支付购买吗?', function(){
                    // 获取用户
                    var userSession = JSON.parse(sessionStorage.getItem('user'));
                    var gidArr = [],
                        uid = userSession.id;
                    // 获取商品id
                    This.setPay.forEach(function(item){
                        gidArr.push(item.gid);
                    });
                    var gidAll = gidArr.join(',');
                    console.log(gidAll)
                    // 启动加载动画
                    addLoad(.3);
                    ajax({
                        url: './php/add-order.php',
                        data: {
                            uid: uid,
                            gid_all: gidAll,
                            state: '已付款'
                        },
                        method: 'post',
                        success: function(res){
                            // 关闭加载动画
                            remLoad();
                            // 购买成功
                            if(res == 1){
                                elasticFrame('购买成功', function(){
                                    var payModule = document.querySelector('.pay-module');
                                        // 返回上一个页面
                                        switchGoodsDetailsFn(false, {
                                            node: payModule,
                                            className: 'pay-module-js'
                                        });
                                    var catGoodsListConUl = document.querySelector('.cat-goods-list-con-ul');
                                    catGoodsListConUl.innerHTML = '';
                                });
                            }else{
                                elasticFrame('购买失败');
                            }
                        }
                    });
                });
            }
        },
        template: `
                <div class="pay-footer" @click="payBtn">
                    支付人民币<span>{{ prices }}</span>
                </div>
                `
    };


    var payModule = {
        props: {setDetailsPay: Array, setCatPay: Array},
        data: function(){
            return {
                setPay: []
            }
        },
        components: {
            'post-top': postTop,
            'pay-list': payList,
            'pay-footer': payFooter
        },
        watch: {
            // 商品详情页 -> 购买页
            setDetailsPay: function(newVal, oldVal){
                //console.log(newVal, oldVal)
                this.setPay = newVal;
            },
            // 购物车页 -> 购买页
            setCatPay: function(newVal, oldVal){
                this.setPay = newVal;
            }
        },
        template: `
            <div class="pay-module">
                <post-top></post-top>
                <pay-list v-bind:set-pay="setPay"></pay-list>
                <pay-footer v-bind:set-pay="setPay"></pay-footer>
            </div>
                `
    };
    return payModule;

}